<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BOM-计时器</title>
		<style>
			div {
				width: 500px;
				margin: 0 auto;
			}
			
			div {
				width: 830px;
				height: 520px;
				background: #010132;
				text-align: center;
				padding: 5px;
			}
			
			h2 {
				font-size: 70px;
				font-family: "楷体";
				color: #FFFFFF;
			}
			
			#time {
				font-size: 70px;
				font-family: "楷体";
				color: #FFFFFF;

			}
		</style>
	</head>

	<body>

		<div id="waikan">
			<h2>超酷时钟</h2>
			<p id="time"></p>
		</div>
		<script type="text/javascript">
			function time() {
				
				var now = new Date();
				var string=now.toLocaleDateString();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var seconds = now.getSeconds();
				var day = "星期" + "日一二三四五六".charAt(new Date().getDay());
				hour = (hour < 10 ? '0' + hour : hour);
				minute = (minute < 10 ? '0' + minute : minute);
				seconds = (seconds < 10 ? +seconds : seconds);
				var time = document.getElementById('time');
				time.innerHTML = string+'<br>'+'<br>'+hour + ':' + minute + ':' + seconds+' '+day;
			}
			window.setInterval(time, 1000);
		</script>
	</body>

</html>